import React, { Component} from 'react'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types'
import * as utils from '@/utils/index.js'
import Popper from 'popper.js'
import actionsC from '@/store/actions.js';
let elementActions = actionsC()

import { observer, inject } from 'mobx-react'

@inject('rootStore')
@observer
class XInput extends Component {
	constructor(props) {
        super(props)
        this.state = {
            value: '',
            el: {}
        }
    }
   	componentWillReceiveProps(nextProp){
        let { slideNumber } = nextProp.rootStore
        const {onNumSlide} = this.props
        let old_slideNumber  = this.props.rootStore.slideNumber
        if(slideNumber.el == this.state.el && slideNumber.moving.y != old_slideNumber.moving.y){
            let _y = old_slideNumber.start.y - slideNumber.moving.y
            let value = slideNumber.baseValue
            let patten = /px|rem|em|pt/
            let unit_match = value.match(patten)
            if(!unit_match)return
            let unit = unit_match[0]
            let val = value.replace(unit,'')*1
            if(!val)return
            val += _y
            console.log("unit ===>", unit, val);
            val += unit
            onNumSlide(val)
        }
	}
    handleFocus(e){
        const { onFocus } = this.props
        this.props.rootStore.updateInputStatus(true)
        onFocus()
    }
    handleBlur(e){
        const {onBlur,rootStore} = this.props
        rootStore.updateInputStatus(false)
        onBlur()
    }
    handleMouseDown(e){
        this.setState({el: e.target})
        this.props.rootStore.setSlideNumber({
            status: true,
            start: {
                x: e.pageX,
                y: e.pageY,
            },
            moving:{
                x: e.pageX,
                y: e.pageY,
            },
            end: {
                x: e.pageX,
                y: e.pageY,
            },
            el: e.target,
            baseValue:  e.target.value
        })
        e.stopPropagation()
        window.panelScroll.disable()
    }
	componentDidMount(){
    }
	render() {
        let input_attribute = _.cloneDeep(this.props)
        delete input_attribute.onFocus
        delete input_attribute.onBlur
        delete input_attribute.onNumSlide
        delete input_attribute.slideNumber
        delete input_attribute.onMouseDown
        delete input_attribute.rootStore
		return (
			<div className="x-input-wrapper">
                <input {...input_attribute}
                onMouseDown={this.handleMouseDown.bind(this)}
                onFocus={this.handleFocus.bind(this)} 
                onBlur={this.handleBlur.bind(this)} />
			</div>
		)
	}
}

XInput.defaultProps = {
    value:'',
    onFocus(){},
    onBlur(){},
    onNumSlide(){}
};

export default XInput